<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>聊天记录</title>
	<style type="text/css">
		.div1{
			height:300px;
			width:300px;
			border:2px solid red;
			background-image:url(http://s3.pstatp.com/toutiao/resource/ntoutiao_web/static/image/logo_201f80d.png);
		}
		.div2{
			height:300px;
			width:300px;
			border:2px solid red;
			background-image:url(https://gss1.bdstatic.com/5eN1dDebRNRTm2_p8IuM_a/res/img/richanglogo168_24.png);
		}
		.div3{
			height:300px;
			width:300px;
			border:2px solid red;
			background-image:url(https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png);
		}
	</style>
	<script type="text/javascript">
	window.onload = function(){
	var onOff = true;
	var i = 1;
		button1.onclick = function(){
			if(text1.value == ''){ 
				alert('请输入您的回答！');
				text1.value = '';
			}
			else if(text1.value == 'JS'||text1.value == 'HTML'||text1.value == 'CSS'){
				alert('您回答的是：' + text1.value + '。恭喜，回答正确！' );
				text1.value = '';
			}	 else {
				alert('不好意思，您的回答错误！');
				text1.value = '';
			}
		};
		button2.onclick = function(){
			i ++;
			switch(i){
				case 1: div1.className = 'div1';break;
				case 2: div1.className = 'div2';break;
				case 3: div1.className = 'div3';i = 0;break;
				default :break;
			}
		};
	};
	</script>
</head>
<body>
	<input id="text1"type="text" placeholder="与网页制作有关的语言" />
	<input id="button1" type="button" value="验证" />
	<br/>
	<div id="div1" class="div1">
	</div>
	<input id="button2" type="button" value="切换" />
</body>
</html>